#drag{ 
    position: relative;
    background-color: #e8e8e8;
    width: 280px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    margin-top:15px;
    border: 1px solid #d8d8d8;
    border-radius: 3px;
}

.slide-to-unlock-bg {
    text-align: center;
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
}

@-webkit-keyframes slidetounlock {
	0% {
		background-position: -200px 0;
	}
	100% {
		background-position: 200px 0;
	}

}

.slide-to-unlock-bg span {
    position: relative;
    z-index: 5;
    color: #666;
    background: -webkit-gradient(linear,left top,right top,color-stop(0,#4d4d4d),color-stop(.4,#4d4d4d),color-stop(.5,#fff),color-stop(.6,#4d4d4d),color-stop(1,#4d4d4d));
    -webkit-text-fill-color:transparent;
    -webkit-background-clip:text;
    -webkit-animation: slidetounlock 3s infinite;
    -webkit-text-size-adjust: none
}

.slide-to-unlock-progress {
    position: absolute;
    left: 0;
    top: 0;
    border-radius: 3px;
}

.slide-to-unlock-handle {
    position: absolute;
    left: -1px;
    top: 0;
    border-radius: 3px;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    z-index: 6;
    cursor: move;
}

.handle-bg{
    background: #fff url("") no-repeat center;
}
.handle-ok-bg{
    background: #fff url("") no-repeat center;
}
